<template>
	<view class="trend">
		<!-- 头部导航 -->
		<view class="w-750 w-bj-white" style="position: fixed; top: 0; left: 0; z-index: 999;">
			<view class="h-100 w-row-justify-between-align">
				<view class="wh-80 w-row-center" @click="routerBack()">
					<image class="wh-40" src="../../../static/gane/goBack-icon.png"></image>
				</view>
				<view class="flex1 h-100 w-row-center w-wz-conts font-36">
					<text>{{typeText[type-1]}}</text>
				</view>
				<view class="wh-80 w-row-center">
					<!-- <uni-datetime-picker type="datetimerange" @change="changeTiem">
						<image class="wh-50" src="../../../static/gane/rq.png"></image>
					</uni-datetime-picker> -->
				</view>
			</view>
		</view>
		<view class="bwh-120"></view>
		<!-- 头部导航结束 -->

    <view class="content-box padding-top-xs">
      <view class="bg-white full-width fl trend-cell">
        <view class="items">
          <view class="w-30 text-bold item">
            期数
          </view>
          <view class="w-20 text-bold item">
            开奖号码
          </view>
          <view class="w-20 text-bold item">
            和值
          </view>
<!--          <view class="w-15 text-bold item">-->
<!--            组合-->
<!--          </view>-->
          <view class="w-15 text-bold item">
            豹顺杂
          </view>
        </view>

        <view class="items" v-for="(item,index) in tableData" :key="index">
          <view class="w-30 text-bold item">
            {{item.issue}}
          </view>
          <view class="w-20 text-bold item">
            {{item.numarr.join(',')}}
          </view>
          <view class="w-20 text-bold item">
            <text>{{item.bet_tema}}</text>
            <block v-for="name in item.bet_name">
              <block v-if="['红大','红双','红单','红小','黑大','黑双','黑单','黑小'].includes(name) && name.length==2">
                ,<text class="text-color-red" v-if="name=='红大'">大</text>
                <text class="text-color-red" v-if="name=='红双'">双</text>
                <text class="text-color-red" v-if="name=='红单'">单</text>
                <text class="text-color-red" v-if="name=='红小'">小</text>
                <text class="text-color-green" v-if="name=='黑大'">大</text>
                <text class="text-color-green" v-if="name=='黑双'">双</text>
                <text class="text-color-green" v-if="name=='黑单'">单</text>
                <text class="text-color-green" v-if="name=='黑小'">小</text>
              </block>
            </block>

          </view>
<!--          <view class="w-15 text-bold item">-->
<!--            <block v-for="name in item.bet_name">-->
<!--              <block v-if="['全顺','半顺','杂','红码','黑码','红单','红双','红大','红小','黑单','黑双','黑大','黑小'].includes(name)">-->
<!--              <text >{{name}}</text>-->
<!--              </block>-->
<!--            </block>-->
<!--          </view>-->
          <view class="w-15 text-bold item">
            <block v-for="name in item.bet_name">
              <text v-if="['全顺','半顺','杂','豹子'].includes(name)">{{name}}</text>
            </block>
            <text v-if="!['全顺','半顺','杂','豹子'].some(item2 => item.bet_name.includes(item2))">-</text>
          </view>
        </view>
      </view>
    </view>
	</view>
</template>

<script>
 import $H from '@/pages/common/request.js'
	export default {
		data () {
			return {
        typeText: ['韩国快3', '韩国极速快3'],
        tableData: [],
        zuhe:['全顺','半顺','杂','红码','黑码','红单','红双','红大','红小','黑单','黑双','黑大','黑小','豹'],
        total: 0,
        start_time: '',
        end_time: '',
        pagenum: 1,
        type: 1,
        ispage: false
			}
		},
    onLoad(option) {
      this.type = option.type || 1
      this.getUserAgentLog()
    },
    onReachBottom() {

      uni.showLoading({
        title: '加载数据中...'
      });
      this.pagenum++
      let timer = setInterval(() => {
        uni.hideLoading();
        if (this.tableData.length == this.total) {
          this.ispage = true
        } else {
          this.getUserAgentLog()
        }
        clearTimeout(timer)
      }, 600);

    },
    methods:{
      getUserAgentLog(isbool) {
        $H.post('/app_k3_redord', {
          pagenum: this.pagenum,
          start_time: this.start_time,
          end_time: this.end_time,
          type:this.type
        }).then((res) => {
          console.log(res)
          if (res.code == 200) {
            if (isbool) {
              if (res.data.data.length == 0) {
                this.tableData = []
              } else {
                this.tableData.push(...res.data.data)
              }
            } else {
              this.tableData.push(...res.data.data)
              this.total = res.data.total
            }


          } else {
            return uni.showToast({
              title: res.msg,
              duration: 1000,
              icon: 'none'
            });
          }
        })
      },
    }
	}
</script>

<style scoped lang="scss">
	.w-row-center {
		color: #323233 !important;
	}
	.trend-cell{
		.items{
			width: 100%;
			display: flex;
		}
		.item{
			    float: left;
			    line-height: 8vw;
			    padding: 0 1.33333vw;
			    border-top: 1px solid #eee;
			    border-left: 1px solid #eee;
			    text-align: center;
				
				&>span{
					margin-left: 10rpx;
				}
		}
		
		.w-30 {
		    width: 30%;
		}
		
		.w-20 {
		    width: 20%;
		}
		
		.w-15 {
		    width: 15%;
		}
	}
</style>